<template>
	<view v-show="show">
		<view class="paper-left-popup-mask" v-show="show" @tap="hidepopup"></view>
		<view class="paper-left-popup" v-show="show">
			<view hover-class="paper-left-popup-h" @tap="addfriend">
				<text class="icon iconfont icon-sousuo"></text>
				加糗友
			</view>
			<view hover-class="paper-left-popup-h" @tap="clear">
				<text class="icon iconfont icon-qingchu"></text>
				清除缓存
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		shows: Boolean
	},
	data() {
		return {
			show: this.shows
		}
	},
	methods: {
		// 操作菜单
		addfriend() {
			console.log('加糗友')
			this.hidepopup()
		},
		clear(){
			console.log('清除缓存')
			this.hidepopup()
		},
		hidepopup() {
			this.$emit('getshow', !this.show)
		}
	},
	watch: {
		shows(newValue){
			this.show = newValue
		}
	}
}
</script>

<style scoped lang="scss">
.paper-left-popup-mask {
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 1999;
}
.paper-left-popup {
	position: fixed;
	right: 0;
	top: 0;
	background-color: #ffffff;
	z-index: 2012;
	width: 55%;
	box-shadow: 1upx 1upx 5upx 3upx #ccc;
	> view {
		padding: 20upx;
		font-size: 35upx;
		> text {
			margin-right: 20upx;
			font-weight: bold;
		}
	}
	.paper-left-popup-h {
		background-color: #eee;
	}
}
</style>
